<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" type="text/css"
      href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0,
          maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>管理员界面</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #999;
            overflow: hidden;
            /*        注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(当li{float:left}时)。         来源链接：https://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_float&basepath=0        */
        }

        li {
            float: left;
        }

        li a {
            color: white;
            padding: 14px 16px;
            display: inline-block;
            text-decoration: none;
        }

        li > a.active {
            background-color: green;
        }

        li > a:hover:not(a.active),
        .dropbtn:hover {
            background-color: #555;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            /* 默认相对于<html>进行绝对定位 */
            background-color: #f9f9f9;
            min-width: 100px;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
        }

        .dropdown-content a {
            color: black;
            display: block;
            /* 因为<a>标签不是块元素，min-width:100px不会生效 */
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
            color: deepskyblue;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 中间的空格表示，鼠标悬念在.dropdown上时，dropdown的子元素.dropdown-content变为块元素 */
        /* ### 待完善 ###
           因为.dropdown只用过一次，觉得可以删除<div class="dropdown"></div>来减少代码量，尝试  将.dropdown:hover .dropdown-content {display: block;} 修改为.dropbtn:hover+.dropdown-content {display: block;} 并删除<div class="dropdown"></div>后，鼠标悬停在“下拉菜单”上，会显示下拉菜单， 但无法选中菜单中的“链接 x”， ### 为什么？该如何完善？ ###
        */


        #myInput {
            background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */
            background-position: 10px 12px; /* 定位搜索按钮 */
            background-repeat: no-repeat; /* 不重复图片 */
            width: 100%;
            font-size: 16px;
            padding: 12px 20px 12px 40px;
            border: 1px solid #ddd;
            margin-bottom: 12px;
        }

        #myTable {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid #ddd;
            font-size: 18px;
        }

        #myTable th, #myTable td {
            text-align: left;
            padding: 12px;
        }

        #myTable tr {
            /* 表格添加边框 */
            border-bottom: 1px solid #ddd;
        }

        #myTable tr.header, #myTable tr:hover {
            /* 表头及鼠标移动过 tr 时添加背景 */
            background-color: #f1f1f1;
        }


        /*左侧导航栏*/
        /*兼容浏览器*/
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 100%;
            height: 100%;
        }

        .content-left {
            width: 19%;
            height: 600px;
            background-color: #1c232f;
            float: left;
        }

        .content-right {
            width: 81%;
            height: 600px;
            background-color: #6495ED;
            float: left;
        }

        .left-title {
            width: 100%;
            height: 50px;
        }

        .left-title > a {
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: white;
            /*去掉a下默认下划线*/
            text-decoration: none;
        }

        /*分割线*/
        .seg {
            height: 1px;
            width: 100%;
            background-color: black;
        }

        .nav {
            /*上下5,左右0*/
            margin: 5px 0;
        }

        /*菜单项主标题*/
        .nav-title {
            height: 40px;
            width: 100%;
            color: white;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        /*子标题内容区*/
        .nav-content {
            width: 100%;
            height: 100%;
            background-color: #0C1119;
        }

        /*子标题的样式*/
        .nav-content > a {
            display: block;
            width: 100%;
            height: 30px;
            color: #CCCCCC;
            text-decoration: none;
            text-align: center;
            line-height: 30px;
            font-size: 13px;
        }

        /*子标题鼠标经过时的改变颜色*/
        .nav-content > a:hover {
            color: #FFFFFF;
            background-color: #12040c;
        }

        /*右上角头像显示区*/
        .head {
        }

        .right {
            width: 100px;
            text-align: right;
            margin-left: 50px;
            position: relative;
        }

        .right .menu {
            position: absolute;
            width: 100px;
            height: 0;
            background: ghostwhite;
            top: 30px;
            left: 0;
            border-radius: 8px;
            transition: all 0.5s;
            overflow: hidden;
        }

        .right:hover .menu {
            height: 100px;
        }


    </style>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>

    <script>
        $(function () {

            //隐藏所有子标题
            $(".nav-menu").each(function () {
                $(this).children(".nav-content").hide();
            });

            //给菜单项中的所有主标题绑定事件
            $(".nav-title").each(function () {
                //获取点击当前标签下所有子标签
                var navConEle = $(this).parents(".nav-menu").children(".nav-content");

                //绑定点击事件,判断navConEle的display这个属性是否为none,none的话是隐藏状态
                $(this).click(function () {
                    if (navConEle.css("display") !== "none") {
                        //隐藏,传参数自带动画,单位为毫秒
                        navConEle.hide(300);
                    } else {
                        //显示,传参数自带动画,单位为毫秒
                        $(".nav-menu").each(function () {
                            $(this).children(".nav-content").hide(300);
                        });
                        navConEle.show(300);
                    }
                });
            });

            $(".nav-content>a").each(function () {
                $(this).click(function () {
                    $(".content-right").html($(this).html());
                });
            });
        });

        //搜索框
        function myFunction() {
            // 获取输入框的值
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");

            // 循环遍历表格每一行，如果单元格中的文本与搜索词匹配，则显示该行，否则隐藏该行
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (var j = 0; j < td.length; j++) {
                    txtValue = td[j].textContent || td[j].innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                        break;
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }

    </script>

</head>


<body>


<ul>
    <li><a href="#home" class="active">主页</a></li>
    <li><a href="/Management.html">会员管理</a></li>
    <li>
        <div class="dropdown"><a href="#" class="dropbtn">下拉菜单</a>
            <div class="dropdown-content"><a href="#">链接 1</a> <a href="#">链接 2</a> <a href="#">链接 3</a></div>
        </div>
    </li>
    <li><a href="#about">关于</a></li>
    <!--右侧显示头像区-->
    <li>
    <div class='head'>
        <div class='right'>
            名字
            <div class='menu'>
                <div class='item'>111</div>
                <div class='item'>111</div>
                <div class='item'>111</div>
            </div>
        </div>
    </div>
    </li>
</ul>

<div class="content">
    <!--左侧导航栏-->
    <div class="content-left">
        <div class="left-title">
            <a href="#">xx后台</a>
        </div>

        <!--水平线-->
        <div class="seg"></div>

        <!--菜单栏导航-->
        <div class="nav">
            <!--每一个菜单栏项-->
            <div class="nav-menu">
                <!--主标题-->
                <div class="nav-title">商品管理</div>
                <!--子标题-->
                <div class="nav-content">
                    <a href="#">商品列表</a>
                    <a href="#">添加商品</a>
                </div>
            </div>

            <!--每一个菜单栏项-->
            <div class="nav-menu">
                <!--主标题-->
                <div class="nav-title">订单管理</div>
                <!--子标题-->
                <div class="nav-content">
                    <a href="#">订单查看</a>
                    <a href="#">订单排序</a>
                </div>
            </div>

            <!--每一个菜单栏项-->
            <div class="nav-menu">
                <!--主标题-->
                <div class="nav-title">类目管理</div>
                <!--子标题-->
                <div class="nav-content">
                    <a href="#">类目查看</a>
                    <a href="#">类目删除</a>
                </div>
            </div>
        </div>



        <!--水平线-->
        <div class="seg"></div>
    </div>

    <!--右侧内容区-->
    <div class="content-right">
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="任意栏均可搜索......">
        <table id="myTable">
            <thead>
            <tr class="header">
                <th>序号</th>
                <th>会员账号</th>
                <th>会员姓名</th>
                <th>性别</th>
                <th>手机号</th>
                <th>邮箱</th>
                <th>余额</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="customer : ${customers}">
                <td th:text="${customerStat.index+1}"></td>
                <td th:text="${customer.account}"></td>
                <td th:text="${customer.name}"></td>
                <td th:text="${customer.gender}"></td>
                <td th:text="${customer.phone}"></td>
                <td th:text="${customer.email}"></td>
                <td th:text="${customer.balance}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

</body>
</html>